<template>
	<view class="main">
		<view class="ul mt20">
			<template v-for="(item, index) in formData">
				<view v-if="item.show" class="li typeface flex_align" :key="index">
					<text class="li_label">{{ item.label }}</text>
					<input class="li_value flex1" v-model="item.value" :type="item.showPassword ? 'text' : 'password'"
						:placeholder="item.placeholder" :maxlength="item.maxlength">
					<view class="li_icon" @click="togglePasswordVisibility(item)">
						<image class="icon" v-if="!item.showPassword" src="/static/img/my/close_eye.png" mode="scaleToFill" />
						<image class="icon" v-else src="/static/img/my/open_eye.png" mode="scaleToFill" />
					</view>
				</view>
			</template>
		</view>
		<view class="btn flex_center_align" @click="submit">
			<text>确定</text>
		</view>
	</view>
</template>

<script>
import { changepwd } from '@/api/my.js'
export default {
	data() {
		return {
			formData: [{
				label: "旧密码",
				value: "",
				showPassword: false,
				placeholder: "请输入密码",
				maxlength: 30,
				show: false // 是否显示
			}, {
				label: "新密码",
				value: "",
				showPassword: false,
				placeholder: "请输入新密码",
				maxlength: 30,
				show: true
			}, {
				label: "再次输入",
				value: "",
				showPassword: false,
				placeholder: "请再次输入新密码",
				maxlength: 30,
				show: true
			}],
		};
	},
	methods: {
		// 切换密码显示
		togglePasswordVisibility(item) {
			item.showPassword = !item.showPassword;
		},
		submit() {
			const { value: oldpass } = this.formData[0];
			const { value: newpass } = this.formData[1];
			const { value: newpass2 } = this.formData[2];

			if (!this.$used.IsEmpty(oldpass) && this.isEdit) { return this.$used.msg('请输入旧密码') };
			if (!this.$used.IsEmpty(newpass)) { return this.$used.msg('请输入新密码') };
			if (!this.$used.IsEmpty(newpass2)) { return this.$used.msg('请再次输入新密码') };
			if (newpass !== newpass2) { return this.$used.msg('两次密码输入不一致') };

			let data = {
				oldpass,
				newpass,
				newpass2,
			}
			if (!this.formData[0].show) {
				delete data.oldpass
			}
			changepwd(data).then(res => {
				if (res.code == '1') {
					this.$used.appBack(res.msg)
				} else {
					that.$used.msg(res.msg);
				}
			})
		},
	},

	onLoad(e) {
		if (e.type == 2) {
			this.formData[0].show = true;
		}
	},

}
</script>

<style lang="scss" scoped>
.main {
	position: relative;
	min-height: 100vh;
	background-color: #fafafa;
	overflow: hidden;

	.ul {
		padding: 0 0 0 30rpx;
		background-color: #fff;

		.li {
			position: relative;
			height: 112rpx;

			.li_label {
				width: 170rpx;
				font-size: 32rpx;
				color: #222229;
			}

			.li_value {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				padding: 10rpx 30rpx 10rpx 0;
				border: none;
			}

			.li_icon {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 50%;
				right: 30px;
				transform: translateY(-50%);

				.icon {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.btn {
		margin: 70rpx auto 0;
		width: 630rpx;
		height: 90rpx;
		background: #1C87F3;
		border-radius: 45rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}

}
</style>
